<template>
    <button @click="toBackAc">返回</button>
    <button @click="changeMsg">改变当前页面值</button>
    <div>{{mCurrentMsg}}</div>
    <router-view v-slot="{ Component }">
        <keep-alive>
            <component :is="Component" :key="mRouterInstance.currentRoute.value.name" />
        </keep-alive>
    </router-view>
    <!-- <div v-if="mCurrentIndex===0">
        <div>fra1{{mCurrentMsg}}</div>
    </div>
    <div v-else-if="mCurrentIndex==1">
        <div>fra2{{mCurrentMsg}}</div>
    </div> -->
    <!-- <router-view></router-view> -->
    <van-tabbar @change="onChange">
        <van-tabbar-item icon="home-o">标签</van-tabbar-item>
        <van-tabbar-item icon="search">标签</van-tabbar-item>
        <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
        <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
    </van-tabbar>
</template>
<script setup lang="ts">
import { getCurrentInstance, ref } from 'vue';
import { useRouter } from 'vue-router'
// import mRouterInstance from '@/router'
import { onBeforeRouteLeave, onBeforeRouteUpdate, type NavigationGuardNext, type RouteLocationNormalized } from 'vue-router';
let mRouterInstance = useRouter()
const mCurrentIndex = ref(0)
const mCurrentMsg = ref("页面3：")
const toBackAc = () => {
    // mKeepAlive.setFalse()
    mRouterInstance.back()
}
// const instance = getCurrentInstance();
// console.log("instance2", instance);

const onChange = ((index: number) => {
    if (index == 1) {
        // mCurrentIndex.value = 1
        // mRouterInstance.push("/TestRouter3Ac")
        mRouterInstance.replace({
            name: 'TestRouter31Fra'
            // path: '/TestRouter3Ac'
            // path: 'TestRouter3Ac/TestRouter31Fra'
        })
    } else {
        // mCurrentIndex.value = 0
        mRouterInstance.replace({
            name: 'TestRouter32Fra'
            // path: '/TestRouter3Ac/TestRouter32Fra'
            // path: 'TestRouter3Ac/TestRouter32Fra'
        })
    }
})
const changeMsg = () => {
    mCurrentMsg.value = mCurrentMsg.value + "改变后"
}
</script>
<style scoped>

</style>